<html>
<head>
<title>推送消息</title> 
{{>/WEB-INF/pages/common/head_refs.part.html}}
<script>
	$(document).ready(function() {
		//聚焦第一个输入框
		$("#msg_title").focus();
		//为inputForm注册validate函数
		$("#inputForm").validate({
			rules:{
				'message.title':{
					required:true,
					maxlength:50
				},
				'message.content':{
					maxlength:256
				}
			}
		});
		
		$("#inputForm").submit(function(evt){
			var form = $(this);
			if(form.valid()==false){
				evt.preventDefault();
				return false;
			}
			//删除所有.gen的hidden控件
			$("input[type='hidden'][class='gen']", form).remove();
			$("#extrasTable tr").each(function(i, tr){
				var inputs=$("input", tr);
				var name=inputs[0].value;
				var value=inputs[1].value;
				if(name!=""&&value!=null){
					var h=['<input type="hidden" class="gen" name="extras[\'',name,'\']" value="',value,'"/>'].join('');
					$("td:last",tr).append(h);
				}
			});
			var tags={};
			$(":checkbox:checked", form).each(function(i, chkbox){
				if(tags[chkbox.name]==undefined){
					tags[chkbox.name]=[chkbox.value]
				}
				else{
					tags[chkbox.name].push(chkbox.value);
				}
			});
			for(key in tags){
				var h=['<input type="hidden" class="gen" name="tags[',key,']" value="',tags[key].join(','),'"/>'].join('');
				form.append(h)
			}
			var data=form.serialize();
			$("#maskModal").modal('show');
			$.ajax({ 
				type: "POST", 
				url: form.attr("action"), 
				data: data, 
				contentType: "application/x-www-form-urlencoded", 
				dataType: "text", 
				success: function(text) { 
					$("#maskModal").modal('hide');
					var ret=$.parseJSON(text);
					if(ret.result){
						$("#infoModal p:first").html(
							'<div>'+
							'<h3>推送请求提交成功</h3>'+
							'<a class="btn" href="{{ctx}}/push/'+ret.pushRequestId+'">查看推送</a>'+
							'</div>'
						);
					}
					else{
						$("#infoModal p:first").html(
							'<div class="alert alert-error">'+
							'<h3>推送请求提交失败</h3>'+
							'<span>'+ret.message+'</span>'+
							'</div>'
						);
					}
					$("#infoModal").modal('show');
				}, 
				error: function(xhr) { 
					$("#maskModal").modal('hide');
					$("#infoModal p:first").html(xhr.responseText);
					$("#infoModal").modal('show');
				}
			});
			return false;
		});
		
		$("#addTag").bind("click", function(){
			var name=$('#extrasTable tr:last input')[0].name;
			var index=/\d+/.exec(name)[0];
			index=parseInt(index);
			index++;
			$("#extrasTable")
		  	.append('<tr>'+
		  			'<td><input type="text" name="key'+index+'" class="span2"/>=</td>'+
					'<td><input type="text" name="value'+index+'" class="span3"/></td>'+
		  		'</tr>');
		}); 
		 
		 $("#delTag").bind("click", function(){
		  	$('#extrasTable tr:last').remove();
		 }); 
		 
		 $("input[name='message.messageType']").bind("click", function(ctrl){
			 if($(ctrl.target).val()=='MODULE'){
				 $('#modules').attr('disabled', false);
			 }
			 else{
				 $('#modules').attr('disabled', true);
			 }
		 });
		 $("input[name='receiverType']").bind("click", function(ctrl){
			 var checkBoxes=$("input[type='checkbox'][class='tags']");
			 if($(ctrl.target).val()=='TAG'){
				 checkBoxes.attr('disabled', false);
			 }
			 else{
				 checkBoxes.attr('disabled', true);
			 }
		 });
	});
</script>
</head>
<body>
	{{>/WEB-INF/pages/common/layout_header.part.html}}
	<div class="container">
		<ul class="breadcrumb">
		  <li><a href="{{ctx}}">首页</a> <span class="divider">/</span></li>
		  <li class="active">推送消息</li>
		</ul>
		<form id="inputForm" action="{{ctx}}/push/create" method="post" class="form-horizontal">
			<fieldset>
				<legend>
					<small>推送消息</small>
				</legend>
				<div class="control-group">
					<label for="appName" class="control-label">应用ID:</label>
					<div class="controls">
						<span class="label label-important">{{appId}}</span>
						<input type="hidden" name="appId" value="{{appId}}"/>
					</div>
				</div>
				
				<div class="control-group">
					<label for="checkin_title" class="control-label">推送目标:</label>
					<div class="controls">
						<label> 
							<input class="choice" type="radio" name="receiverType" value="APP_ID" checked />该应用的所有设备
						</label>
						<div>
							{{#tagSum}}
							<label> 
								<input class="choice" type="radio" name="receiverType" value="TAG" />按标签
							</label>
							{{/tagSum}}
							{{#tagSum}}
								{{#tags}}
								<div class="form-inline">
									<span class="label label-info">{{key}}</span>
									{{#values}}
										<label class="checkbox">
										<input type="checkbox" class="tags" value="{{.}}" name="{{key}}" disabled/>
										<span class="label label-success">{{.}}</span>
										</label>
									{{/values}}
								</div>
								{{/tags}}
							{{/tagSum}}
						</div>
						{{^tagSum}}
						<label> 
							<input class="choice" type="radio" name="receiverType" value="TAG" disabled/>按标签&nbsp;(该应用暂无标签数据)
						</label>
						{{/tagSum}}
					</div>
				</div>
				<div class="control-group">
					<label for="checkin_title" class="control-label">消息类型:</label>
					<div class="controls">
						<label> 
							<input class="choice" type="radio" name="message.messageType" value="SYS" checked/>系统消息
						</label>
						<label> 
							<input class="choice" type="radio" name="message.messageType" value="MODULE" />模块消息
						</label>
						<input type="text" id="modules" name="moduleIdentifer" class="input-large required" disabled/>
					</div>
				</div>
				<div class="control-group">
					<label for="msg_title" class="control-label">推送标题:</label>
					<div class="controls">
						<input type="text" id="msg_title" name="message.title"
							class="input-large" required value="{{msg.title}}" />
					</div>
				</div>
				<div class="control-group">
					<label for="msg_content" class="control-label">推送内容:</label>
					<div class="controls">
						<textarea id="msg_content" name="message.content" class="input-large required">{{msg.content}}</textarea>
					</div>
				</div>
				<div class="control-group">
					<label for="tags" class="control-label">高级:</label>
					<div class="controls">
						<input type="button" id="addTag" class="btn" value="增加"/>
						<input type="button" id="delTag" class="btn" value="删除"/>
						<table id="extrasTable">
							<tr>
								<td><input type="text" name="key0" class="span2" />=</td>
								<td><input type="text" name="value0" class="span3" />
								</td>
							</tr>
						</table>
					</div>
				</div>
				<div class="form-actions">
					<input id="submit_btn" class="btn btn-primary" type="submit"
						value="提交" />
				</div>
			</fieldset>
		</form>
		<div>
			<a class="btn" href="{{ctx}}/push/config">推送配置管理</a>
			<a class="btn" href="{{ctx}}/push/requests-by-app/{{appId}}">推送历史</a>
			&nbsp; <button class="btn" onclick="history.back()">返回</button>
		</div>
		{{>/WEB-INF/pages/common/layout_footer.part.html}}
	</div>
	<div id="maskModal" class="modal hide fade" tabindex="-1" data-backdrop="false">
		<div class="modal-body">
			<div class="progress progress-striped active">
				<div class="bar" style="width: 100%;">
				</div>
			</div>
		</div>
	</div>
	<div id="infoModal" class="modal hide fade" tabindex="-1">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		</div>
		<div class="modal-body">
			<p></p>
		</div>
	</div>
</body>
</html>
